<template>
  <div>
    <!---搜索栏 -->
    <div>
      <el-input v-model="name" placeholder="请输入名称" style="width: 300px; "/>
      <el-input v-model="name" placeholder="请输入名称" style="width: 300px; margin-left: 5px"/>
      <el-button style="margin-left: 5px" type="primary">
        <el-icon style="vertical-align: middle">
          <Search />
        </el-icon>
        <span style="vertical-align: middle"> 搜索 </span>
      </el-button>
      <el-button style="margin-left: 5px" type="warning">
        <el-icon style="vertical-align: middle">
          <RefreshLeft />
        </el-icon>
        <span style="vertical-align: middle"> 重置 </span>
      </el-button>
      <el-button style="margin-left: 5px" type="success">
        <el-icon style="vertical-align: middle">
          <Plus />
        </el-icon>
        <span style="vertical-align: middle"> 新增 </span>
      </el-button>
    </div>
    <!---表单 -->
    <div style="margin:10px 0">
      <el-table :data="state.tableData" stripe border   @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" prop="stu_Num" label="学号" ></el-table-column>
        <el-table-column align="center" prop="stu_Name" label="姓名"></el-table-column>
        <el-table-column align="center" prop="score_Chinese" label="语文"></el-table-column>
        <el-table-column align="center" prop="score_Math" label="数学"></el-table-column>
        <el-table-column align="center" prop="score_Eng" label="英语"></el-table-column>
        <el-table-column align="center" prop="score_Phy" label="物理"></el-table-column>
        <el-table-column align="center" prop="score_Chem" label="化学"></el-table-column>
        <el-table-column align="center" prop="score_Biol" label="生物"></el-table-column>
        <el-table-column align="center" label="操作" width="180px">
          <el-button type="primary">编辑</el-button>
          <el-button type="danger">删除</el-button>
        </el-table-column>
      </el-table>
    </div>
    <!---分页组件 -->
    <div style="margin:10px 0">
      <el-pagination
          v-model:current-page="pageNowNum"
          v-model:page-size="pageSize"
          large
          background
          layout="total, sizes,prev,pager,next,jumper"
          :total="50"
      />
    </div>
  </div>
</template>

<script setup>
import {
  Search,
  RefreshLeft,
  Plus,
} from '@element-plus/icons-vue'
import {reactive, ref} from "vue";

const name = ref('')
const pageNowNum=ref(1)
const pageSize=ref(10)

const state = reactive({
  tableData:[
    {stu_Num:'201901001',stu_Name:'李四',score_Chinese:'112',score_Math:'108',score_Eng:'111',score_Phy:'77',score_Chem:'66',score_Biol:'55'},
    {stu_Num:'201901001',stu_Name:'王六',score_Chinese:'108',score_Math:'91',score_Eng:'99',score_Phy:'68',score_Chem:'69',score_Biol:'62'},
    {stu_Num:'201901001',stu_Name:'张三',score_Chinese:'111',score_Math:'115',score_Eng:'115',score_Phy:'81',score_Chem:'74',score_Biol:'73'},
  ],
})

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

</script>
